<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用sweetalert2弹出漂亮的弹窗</title>
    <script src="../js/sweetalert2.js"></script>
</head>
<body>

<button title="错误弹窗" onclick="fireAlert()">错误弹窗</button>
<button title="带按钮弹窗" onclick="buttonAlert()">带按钮弹窗</button>
<button title="自定义提示框" onclick="customPromptBox()">自定义提示框</button>
<button title="倒计时弹窗" onclick="timedPopup()">倒计时弹窗</button>
<button title="mini提示" onclick="miniAlertSuccess()">mini成功</button>
<button title="mini提示" onclick="miniAlertFail()">mini失败</button>

</body>
<script>
    /**
     * 功能:
     *      弹窗属性说明.
     * 说明:
     *      1. type可选值: success, error, warning, info, question.
     */
    function fireAlert() {
        Swal.fire({
            //提示的类型
            type: 'error',
            //提示的标题
            title: 'Oops...',
            //提示的内容
            text: 'Something went wrong!',
            //footer是可选的
            //footer: '<a href="#">Why do I have this issue?</a>'
        });
    }

    function buttonAlert() {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            //设置取消按钮显示的内容
            cancelButtonText: '取消',
            //确认按钮颜色
            confirmButtonColor: '#3085d6',
            //取消按钮颜色
            cancelButtonColor: '#d33',
            //确认按钮显示的内容
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            console.log(result);
            //如果点击确认, result对象中就会有一个字段为true, 点击cancel按钮就没有这个值了.
            if (result.value) {
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                ).then(result => {
                    console.log(1, result);
                })
            }
        })
    }

    function customPromptBox() {
        Swal.fire({
            /*
            功能:
                控制显示的位置, 格式'上下位置-左右位置';
            说明:
                1. 上下位置可选值:
                    - bottom: 底部
                    - top: 顶部
                2. 左右位置可选值:
                    - start: 最左边;
                    - end: 最右边.
             */
            position: 'top-end',
            type: 'success',
            title: 'Your work has been saved',
            //为false就不显示按钮了
            showConfirmButton: false,
            //自动关闭的时间
            timer: 1500
        })
    }

    function timedPopup() {
        let timerInterval;
        Swal.fire({
            title: 'Auto close alert!',
            html: 'I will close in <strong></strong> milliseconds.',
            timer: 2000,
            onBeforeOpen: () => {
                Swal.showLoading();
                timerInterval = setInterval(() => {
                    Swal.getContent()
                        .querySelector('strong')
                        .textContent = Swal.getTimerLeft()
                }, 100)
            },
            onClose: () => {
                clearInterval(timerInterval)
            }
        }).then((result) => {
            if (
                /* Read more about handling dismissals below */
                result.dismiss === Swal.DismissReason.timer
            ) {
                console.log('I was closed by the timer')
            }
        })
    }

    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
    });
    function miniAlertSuccess() {
        Toast.fire({
            type: 'success',
            title: '删除成功'
        })
    }

    function miniAlertFail() {
        Toast.fire({
            //type可选值: success, error, warning, info, question.
            type: 'error',
            title: '删除失败, 可能的原因是非常长的一段话, 查看会怎么显示'
        })
    }

</script>
</html>